﻿@page "/diagram/fishbone-diagram"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@inherits SampleBaseComponent;

<SampleDescription>
  <p> This sample visually represents a simple fishbone diagram in Syncfusion Blazor. Diagram nodes and annotations are used to define fishbone diagrams.</p>  
  <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>This sample shows how to create a fishbone diagram (Ishikawa) using the Diagram control. Here, zoom and pan options are enabled.The Tool property of the Diagram control allows you to enable or disable zoom and pan options. Read-only mode is enabled here.</p>
</ActionDescription>

<div>
    <div id="diagram-space" class="content-wrapper" style="height:700px">
        <SfDiagram Height="700px" @ref="@Diagram" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Tool="@DiagramTools.ZoomPan" BackgroundColor="white">
            <DiagramPageSettings>
                <DiagramFitOptions CanFit="@true" Mode="FitModes.Page"></DiagramFitOptions>
                <DiagramSnapSettings Constraints="@SnapConstraints.None"></DiagramSnapSettings>
            </DiagramPageSettings>
        </SfDiagram>
    </div>
</div>

@code{
    SfDiagram Diagram;

    public ObservableCollection<DiagramNode> NodeCollection { get; set; }
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();


        #region BpmnShapeModel

        DiagramNodeAnnotation EquipmentAnnot = new DiagramNodeAnnotation() { Content = "Equipment", Style = { Color = "white" } };
        DiagramNode EquipmentNode = new DiagramNode()
        {
            Id = "Equipment",
            OffsetX = 300,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                EquipmentAnnot
            }
        };
        NodeCollection.Add(EquipmentNode);

        DiagramNodeAnnotation EnvironmentAnnot = new DiagramNodeAnnotation() { Content = "Environment", Style = { Color = "white" } };
        DiagramNode EnvironmentNode = new DiagramNode()
        {
            Id = "Environment",
            OffsetX = 450,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                EnvironmentAnnot
            }
        };
        NodeCollection.Add(EnvironmentNode);

        DiagramNodeAnnotation PersonAnnot = new DiagramNodeAnnotation() { Content = "Person", Style = { Color = "white" } };
        DiagramNode PersonNode = new DiagramNode()
        {
            Id = "Person",
            OffsetX = 600,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                PersonAnnot
            }
        };
        NodeCollection.Add(PersonNode);

        DiagramNodeAnnotation MaterialsAnnot = new DiagramNodeAnnotation() { Content = "Materials", Style = { Color = "white" } };
        DiagramNode MaterialsNode = new DiagramNode()
        {
            Id = "Materials",
            OffsetX = 300,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                MaterialsAnnot
            }
        };
        NodeCollection.Add(MaterialsNode);

        DiagramNodeAnnotation MachineAnnot = new DiagramNodeAnnotation() { Content = "Machine", Style = { Color = "white" } };
        DiagramNode MachineNode = new DiagramNode()
        {
            Id = "Machine",
            OffsetX = 450,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                MachineAnnot
            }
        };
        NodeCollection.Add(MachineNode);

        DiagramNodeAnnotation MethodsAnnot = new DiagramNodeAnnotation() { Content = "Method", Style = { Color = "white" } };
        DiagramNode MethodsNode = new DiagramNode()
        {
            Id = "Methods",
            OffsetX = 600,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
            {
                MethodsAnnot
            }
        };
        NodeCollection.Add(MethodsNode);

        DiagramNodeAnnotation Ellipse1Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse1Node = new DiagramNode()
        {
            Id = "ellipse1",
            OffsetX = 290,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse1Annot
            }
        };
        NodeCollection.Add(Ellipse1Node);

        DiagramNodeAnnotation Ellipse2Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse2Node = new DiagramNode()
        {
            Id = "ellipse2",
            OffsetX = 323,
            OffsetY = 183,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse2Annot
            }
        };
        NodeCollection.Add(Ellipse2Node);

        DiagramNodeAnnotation Ellipse3Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse3Node = new DiagramNode()
        {
            Id = "ellipse3",
            OffsetX = 354,
            OffsetY = 237,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse3Annot
            }
        };
        NodeCollection.Add(Ellipse3Node);

        DiagramNodeAnnotation Ellipse4Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse4Node = new DiagramNode()
        {
            Id = "ellipse4",
            OffsetX = 440,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse4Annot
            }
        };
        NodeCollection.Add(Ellipse4Node);

        DiagramNodeAnnotation Ellipse5Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse5Node = new DiagramNode()
        {
            Id = "ellipse5",
            OffsetX = 470,
            OffsetY = 182,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse5Annot
            }
        };
        NodeCollection.Add(Ellipse5Node);

        DiagramNodeAnnotation Ellipse6Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse6Node = new DiagramNode()
        {
            Id = "ellipse6",
            OffsetX = 590,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse6Annot
            }
        };
        NodeCollection.Add(Ellipse6Node);

        DiagramNodeAnnotation Ellipse7Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse7Node = new DiagramNode()
        {
            Id = "ellipse7",
            OffsetX = 622,
            OffsetY = 179,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse7Annot
            }
        };
        NodeCollection.Add(Ellipse7Node);

        DiagramNodeAnnotation Ellipse8Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse8Node = new DiagramNode()
        {
            Id = "ellipse8",
            OffsetX = 660,
            OffsetY = 221,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse8Annot
            }
        };
        NodeCollection.Add(Ellipse8Node);

        DiagramNodeAnnotation Ellipse9Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse9Node = new DiagramNode()
        {
            Id = "ellipse9",
            OffsetX = 694,
            OffsetY = 264,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse9Annot
            }
        };
        NodeCollection.Add(Ellipse9Node);

        DiagramNodeAnnotation Ellipse10Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse10Node = new DiagramNode()
        {
            Id = "ellipse10",
            OffsetX = 354,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse10Annot
            }
        };
        NodeCollection.Add(Ellipse10Node);

        DiagramNodeAnnotation Ellipse11Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse11Node = new DiagramNode()
        {
            Id = "ellipse11",
            OffsetX = 590,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse11Annot
            }
        };
        NodeCollection.Add(Ellipse11Node);

        DiagramNodeAnnotation Ellipse12Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse12Node = new DiagramNode()
        {
            Id = "ellipse12",
            OffsetX = 660,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse12Annot
            }
        };
        NodeCollection.Add(Ellipse12Node);

        DiagramNodeAnnotation Ellipse13Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse13Node = new DiagramNode()
        {
            Id = "ellipse13",
            OffsetX = 440,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse13Annot
            }
        };
        NodeCollection.Add(Ellipse13Node);

        DiagramNodeAnnotation Ellipse14Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse14Node = new DiagramNode()
        {
            Id = "ellipse14",
            OffsetX = 510,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse14Annot
            }
        };
        NodeCollection.Add(Ellipse14Node);

        DiagramNodeAnnotation Ellipse15Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Ellipse15Node = new DiagramNode()
        {
            Id = "ellipse15",
            OffsetX = 290,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Ellipse15Annot
            }
        };
        NodeCollection.Add(Ellipse15Node);

        DiagramNodeAnnotation ColorEllipse1Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode ColorEllipse1Node = new DiagramNode()
        {
            Id = "Colorellipse1",
            OffsetX = 717,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                ColorEllipse1Annot
            }
        };
        NodeCollection.Add(ColorEllipse1Node);

        DiagramNodeAnnotation ColorEllipse2Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode ColorEllipse2Node = new DiagramNode()
        {
            Id = "Colorellipse2",
            OffsetX = 560,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                ColorEllipse2Annot
            }
        };
        NodeCollection.Add(ColorEllipse2Node);

        DiagramNodeAnnotation Colorellipse3Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Colorellipse3Node = new DiagramNode()
        {
            Id = "Colorellipse3",
            OffsetX = 390,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Colorellipse3Annot
            }
        };
        NodeCollection.Add(Colorellipse3Node);

        DiagramNodeAnnotation Colorellipse4Annot = new DiagramNodeAnnotation() { Content = "", Style = { Color = "white" } };
        DiagramNode Colorellipse4Node = new DiagramNode()
        {
            Id = "Colorellipse4",
            OffsetX = 220,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new NodeShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Colorellipse4Annot
            }
        };
        NodeCollection.Add(Colorellipse4Node);

        DiagramNodeAnnotation Colorellipse5Annot = new DiagramNodeAnnotation() { Content = "Productivity Increase", Style = { Color = "white" } };
        DiagramNode Colorellipse5Node = new DiagramNode()
        {
            Id = "Colorellipse5",
            OffsetX = 900,
            OffsetY = 310,
            Width = 140,
            Height = 90,
            Style = new NodeShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                Colorellipse5Annot
            }
        };
        NodeCollection.Add(Colorellipse5Node);

        DiagramNode TextprogramsNode = new DiagramNode()
        {
            Id = "TextPrograms",
            OffsetX = 189,
            OffsetY = 130,
            Width = 90,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Text Programs" },

        };
        NodeCollection.Add(TextprogramsNode);

        DiagramNode VentilatorssoundNode = new DiagramNode()
        {
            Id = "Ventilatorssound",
            OffsetX = 359,
            OffsetY = 130,
            Width = 120,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Ventilators Sound" },

        };
        NodeCollection.Add(VentilatorssoundNode);

        DiagramNode EducationNode = new DiagramNode()
        {
            Id = "Education",
            OffsetX = 500,
            OffsetY = 130,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Education" },

        };
        NodeCollection.Add(EducationNode);

        DiagramNode DatabooksNode = new DiagramNode()
        {
            Id = "DataBooks",
            OffsetX = 213,
            OffsetY = 183,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "DataBooks" },

        };
        NodeCollection.Add(DatabooksNode);

        DiagramNode FixturesNode = new DiagramNode()
        {
            Id = "Fixtures",
            OffsetX = 240,
            OffsetY = 237,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Fixtures" },

        };
        NodeCollection.Add(FixturesNode);

        DiagramNode NoiseNode = new DiagramNode()
        {
            Id = "Noise",
            OffsetX = 390,
            OffsetY = 182,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Noise" },

        };
        NodeCollection.Add(NoiseNode);

        DiagramNode MotivationNode = new DiagramNode()
        {
            Id = "Motivation",
            OffsetX = 535,
            OffsetY = 182,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Motivation" },

        };
        NodeCollection.Add(MotivationNode);

        DiagramNode TirednessNode = new DiagramNode()
        {
            Id = "Tiredness",
            OffsetX = 565,
            OffsetY = 224,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Tiredness" },

        };
        NodeCollection.Add(TirednessNode);

        DiagramNode StorerNode = new DiagramNode()
        {
            Id = "Storer",
            OffsetX = 606,
            OffsetY = 264,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Storer" },

        };
        NodeCollection.Add(StorerNode);

        DiagramNode ComputerNode = new DiagramNode()
        {
            Id = "Computer",
            OffsetX = 260,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Computer" },

        };
        NodeCollection.Add(ComputerNode);

        DiagramNode QualityNode = new DiagramNode()
        {
            Id = "Quality",
            OffsetX = 417,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Quality of Element" },

        };
        NodeCollection.Add(QualityNode);

        DiagramNode OrderNode = new DiagramNode()
        {
            Id = "Order",
            OffsetX = 562,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Order" },

        };
        NodeCollection.Add(OrderNode);

        DiagramNode SoftwareNode = new DiagramNode()
        {
            Id = "Software",
            OffsetX = 225,
            OffsetY = 530,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Software" },
        };
        NodeCollection.Add(SoftwareNode);

        DiagramNode ProcurementNode = new DiagramNode()
        {
            Id = "Procurement",
            OffsetX = 358,
            OffsetY = 530,
            Width = 70,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Procurement" },

        };
        NodeCollection.Add(ProcurementNode);

        DiagramNode StandardizationNode = new DiagramNode()
        {
            Id = "Standardization",
            OffsetX = 501,
            OffsetY = 530,
            Width = 90,
            Height = 20,
            Style = new NodeShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Content = "Standardization" },

        };
        NodeCollection.Add(StandardizationNode);


        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        CreateConnector("equipellise", "5,5", "Equipment", "ellipse1", "#A52A2A", 2);
        CreateConnector("connect12", "5,5", "ellipse1", "ellipse2", "#A52A2A", 2);
        CreateConnector("connect13", "5,5", "ellipse2", "ellipse3", "#A52A2A", 2);
        CreateConnector("connect14", "5,5", "ellipse3", "Colorellipse3", "#A52A2A", 2);
        CreateConnector("connect15", "5,5", "Environment", "ellipse4", "#A52A2A", 2);
        CreateConnector("connect16", "5,5", "ellipse4", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect17", "5,5", "ellipse4", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect18", "5,5", "ellipse5", "Colorellipse2", "#A52A2A", 2);
        CreateConnector("connect19", "5,5", "Person", "ellipse6", "#A52A2A", 2);
        CreateConnector("connect20", "5,5", "ellipse6", "ellipse7", "#A52A2A", 2);
        CreateConnector("connect21", "5,5", "ellipse7", "ellipse8", "#A52A2A", 2);
        CreateConnector("connect22", "5,5", "ellipse8", "ellipse9", "#A52A2A", 2);
        CreateConnector("connect23", "5,5", "ellipse9", "Colorellipse1", "#A52A2A", 2);
        CreateConnector("connect24", "5,5", "Materials", "ellipse15", "#A52A2A", 2);
        CreateConnector("connect25", "5,5", "ellipse15", "ellipse10", "#A52A2A", 2);
        CreateConnector("connect26", "5,5", "ellipse10", "Colorellipse3", "#A52A2A", 2);
        CreateConnector("connect27", "5,5", "Machine", "ellipse13", "#A52A2A", 2);
        CreateConnector("connect28", "5,5", "ellipse13", "ellipse14", "#A52A2A", 2);
        CreateConnector("connect29", "5,5", "ellipse14", "Colorellipse2", "#A52A2A", 2);
        CreateConnector("connect30", "5,5", "Methods", "ellipse11", "#A52A2A", 2);
        CreateConnector("connect31", "5,5", "ellipse11", "ellipse12", "#A52A2A", 2);
        CreateConnector("connect32", "5,5", "ellipse12", "Colorellipse1", "#A52A2A", 2);
        CreateConnector("connect33", "", "Colorellipse4", "Colorellipse3", "#000000", 2);
        CreateConnector("connect34", "", "Colorellipse3", "Colorellipse2", "#000000", 2);
        CreateConnector("connect35", "", "Colorellipse2", "Colorellipse1", "#000000", 2);
        CreateConnector("connect36", "", "Colorellipse1", "Colorellipse5", "#000000", 2);
        CreateConnector("connect37", "5,5", "TextPrograms", "ellipse1", "#A52A2A", 2);
        CreateConnector("connect38", "5,5", "DataBooks", "ellipse2", "#A52A2A", 2);
        CreateConnector("connect39", "5,5", "Fixtures", "ellipse3", "#A52A2A", 2);
        CreateConnector("connect40", "5,5", "Ventilatorssound", "ellipse4", "#A52A2A", 2);
        CreateConnector("connect41", "5,5", "Noise", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect42", "5,5", "Education", "ellipse6", "#A52A2A", 2);
        CreateConnector("connect43", "5,5", "Motivation", "ellipse7", "#A52A2A", 2);
        CreateConnector("connect44", "5,5", "Tiredness", "ellipse8", "#A52A2A", 2);
        CreateConnector("connect45", "5,5", "Storer", "ellipse9", "#A52A2A", 2);
        CreateConnector("connect46", "5,5", "Software", "ellipse15", "#A52A2A", 2);
        CreateConnector("connect47", "5,5", "Computer", "ellipse10", "#A52A2A", 2);
        CreateConnector("connect48", "5,5", "Procurement", "ellipse13", "#A52A2A", 2);
        CreateConnector("connect49", "5,5", "Quality", "ellipse14", "#A52A2A", 2);
        CreateConnector("connect50", "5,5", "Order", "ellipse12", "#A52A2A", 2);
        CreateConnector("connect51", "5,5", "Standardization", "ellipse11", "#A52A2A", 2);
    }

    private void CreateConnector(string id, string lineDashArray, string source, string target, string lineColor, int lineWidth)
    {
        DiagramConnector DiagramConnector = new DiagramConnector()
        {
            Id = id,
            SourceID = source,
            TargetID = target,
            Style = new ConnectorShapeStyle { StrokeColor = lineColor, StrokeWidth = lineWidth, StrokeDashArray = lineDashArray },
            TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 5, Height = 5 }
            
        };
        if (id != "connect33" && id != "connect34" && id != "connect35" && id != "connect36")
        {
            DiagramConnector.TargetDecorator.Style = new DecoratorShapeStyle() { StrokeColor = "#A52A2A", Fill = "#A52A2A" };
        }

        ConnectorCollection.Add(DiagramConnector);
    }
    #endregion
}







